<template>
	<view class="container">
		<view class="team-title">
			<view class="directly" :class="{'directly-after':flag1}" @click="directly">直接推广团队</view>
			<view class="indirect" :class="{'indirect-after':flag2}" @click="indirect">间接推广团队</view>
		</view>
		<!-- 直推会员列表 -->
		<view v-if="flag1==true">
			<!-- 列表标题 -->
			<view class="list-title">
				<view class="left">名称</view>
				<view class="middle">等级</view>
				<view class="right">注册时间</view>
			</view>
			<!-- 会员列表 -->
			<view class="list-item" v-for="(item,index) in directlyList">
				<view class="left">{{item.nickname}}</view>
				<view class="middle">{{item.is_vip | isVip}}</view>
				<view class="right">{{item.create_time}}</view>
			</view>
		</view>
		<!-- 间推会员列表 -->
		<view v-if="flag2==false">
			<!-- 列表标题 -->
			<view class="list-title">
				<view class="left">名称</view>
				<view class="middle">等级</view>
				<view class="right">注册时间</view>
			</view>
			<!-- 会员列表 -->
			<view class="list-item" v-for="(item,index) in indirectList">
				<view class="left">{{item.nickname}}</view>
				<view class="middle">{{item.is_vip | isVip}}</view>
				<view class="right">{{item.create_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {myIndirectTeam,myDirectTeam} from '../../api/user.js'
	export default{
		data(){
			return{
				flag1:true,
				flag2:true,
				directlyList:[],
				indirectList:[],
			}
		},
		onLoad() {
			this.getDirect()
		},
		filters:{
			isVip(data){
				let vip=''
				if(data==0){
					vip="普通用户"
					return vip
				}else{
					vip="VIP"
					return vip
				}
			}
		},
		methods:{
			directly(){
				this.flag1=true
				this.flag2=true
				this.getDirect()
			},
			indirect(){
				this.getIndirect()
				this.flag1=false
				this.flag2=false
			},
			getDirect(){
				this.post(myDirectTeam,{user_id:uni.getStorageSync("userInfo").id}).then(res=>{
					console.log(res)
					this.directlyList=res.data.data
				})
			},
			getIndirect(){
				this.post(myIndirectTeam,{user_id:uni.getStorageSync("userInfo").id}).then(r=>{
					console.log(r)
					this.indirectList=r.data.data
				})
			}
			
		}
	}
</script>

<style>
	.container{
		padding: 30rpx;
	}
	.team-title{
		display: flex;
		align-items: center;
		text-align: center;
		line-height: 87rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.directly{
		width: 345rpx;
		height: 87rpx;
		background: #B3DFC4;
		opacity: 0.3;
		border-radius: 16rpx 0rpx 0rpx 16rpx;
		color: #333333;
	}
	.directly-after{
		background: #06923D;
		opacity: 1;
		color: #FFFFFF;
	}
	.indirect{
		width: 345rpx;
		height: 87rpx;
		background: #06923D;
		opacity: 1;
		border-radius: 0px 16rpx 16rpx 0px;
		color: #FFFFFF;
	}
	.indirect-after{
		background: #B3DFC4;
		opacity: 0.3;
		color: #333333;
	}
	.list-title{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 70rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.left{
		width: 30%;
		
	}
	.middle{
		width: 24%;
		text-align: center;
	}
	.right{
		width: 46%;
		text-align: center;
	}
	.list-item{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
</style>
